<template>
  <div>
    <div class="toText">{{scriptItem.label}}</div>
    <el-select v-model="templateId"
               filterable
               clearable
               :placeholder="scriptItem.hint"
               default-first-option>
      <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]"
                 :key="ii"
                 :value="o[scriptItem.fieldValue]"
                 :label="o[scriptItem.fieldLabel]"></el-option>
    </el-select>
    <quill-editor style="padding: 10px 0;border: 1px solid #efefef;margin-top: 10px;"
                  ref="myTextEditor"
                  v-model="dataForm[scriptItem.text]"
                  :options="editorOption"></quill-editor>
  </div>
</template>

<script>
import TypeSelect from './type-select'
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  props: {
    blockInfo: {
      type: Object,
      default: () => { }
    }
  },
  mixins: [mixinTypeViewModule],
  data () {
    return {
      editorOption: {
        name: '232',
        modules: {
          toolbar: [
            ['code-block'],
            [{ 'direction': 'rtl' }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }],
            [{ 'background': [] }],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'font': ['sans-serif', 'monospace', 'serif'] }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'align': [] }],
            ['link'],
            ['clean']
          ]
        },
        theme: 'snow',
        placeholder: ''
      },
      templateId: null
    }
  },
  created () {
    if (!this.dataForm[this.scriptItem.text]) {
      this.$set(this.dataForm, this.scriptItem.text, '')
    }
  },
  watch: {
    templateId (val) {
      if (val) {
        this.dataForm[this.scriptItem.text] = this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].find(e => e[this.scriptItem.fieldValue] === this.templateId)[this.scriptItem.templateFields]
      }
    }
  },
  methods: {
  },
  components: {
    TypeSelect
  }
}
</script>

<style scoped>
</style>
